<template>
  <view class="progress_box">
    <canvas 
      class="progress_bg" 
      canvas-id="cpbg"
      :style="{width: progress_width + 'px', height: progress_height + 'px'}"
    ></canvas>
    <canvas 
      class="progress_bar" 
      canvas-id="cpbar"
      :style="{width: progress_width + 'px', height: progress_height + 'px'}"
    ></canvas>
    <canvas 
      class="progress_indicator" 
      canvas-id="cpindicator"
      :style="{width: progress_width + 'px', height: progress_height + 'px'}"
    ></canvas>
  </view>
  <view class=" absolute top-[20%] left-[45%] ">
    <view class=" flex flex-col items-center">
         <view class=" text-#333 text-[24rpx] ">得分</view>
         <view class=" text-3xl font-700">{{ value }}</view>
         <view class=" text-#333 text-[24rpx] ">/100</view>
    </view>
  </view>
  <view class=" absolute top-[70%] left-[17%]">
    <view class="flex items-center">
        <wd-icon name="check-circle-filled" size="22px" color="#398AFA"></wd-icon>
        <text class="ml-4rpx text-#333">高于90%的用户，请继续保持</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watch, getCurrentInstance } from 'vue'

// Props定义
const props = defineProps({
  value: {
    type: Number,
    default: 0,
    required: true
  },
  progress_time: {
    type: Number,
    default: 1500
  },
  progress_width: {
    type: Number,
    default: 300
  },
  progress_height: {
    type: Number,
    default: 200
  },
  border_width: {
    type: Number,
    default: 15
  },
  bg_width: {
    type: Number,
    default: 25
  },
  bg_color: {
    type: String,
    default: '#EDEDED'
  },
  start_color: {
    type: String,
    default: '#47ABFF'
  },
  end_color: {
    type: String,
    default: '#7EA2FF'
  },
  // 端点指示器相关属性
  indicator_show: {
    type: Boolean,
    default: true
  },
  indicator_size: {
    type: Number,
    default: 8
  },
  indicator_border_color: {
    type: String,
    default: '#FFFFFF'
  },
  indicator_border_width: {
    type: Number,
    default: 2
  },
  // 渐变相关属性
  indicator_gradient_start: {
    type: String,
    default: '#64A2EA'
  },
  indicator_gradient_end: {
    type: String,
    default: '#9D91BF'
  }
})

// 获取当前实例
const instance = getCurrentInstance()

// 响应式数据
const percent = ref(0)

// 计算属性
const centerX = computed(() => props.progress_width / 2)
const centerY = computed(() => props.progress_height / 2)
const radius = computed(() => Math.min(centerX.value, centerY.value) - props.border_width - 10)

// 方法
const drawProgressbg = () => {
  const ctx = uni.createCanvasContext('cpbg', instance)
  ctx.setLineWidth(props.bg_width)
  ctx.setStrokeStyle(props.bg_color)
  ctx.setLineCap('round')
  ctx.beginPath()
  ctx.arc(centerX.value, centerY.value, radius.value, 0.99 * Math.PI, 0.01 * Math.PI, false)
  ctx.stroke()
  ctx.draw()
}

const drawCircle = (step) => {
  if (step === 0) return
  
  const time = Math.floor(props.progress_time / 100)
  const ctx = uni.createCanvasContext('cpbar', instance)
  
  const gradient = ctx.createLinearGradient(28, 55, 192, 55)
  gradient.addColorStop('0', props.start_color)
  gradient.addColorStop('1.0', props.end_color)
  
  ctx.setLineWidth(props.border_width)
  ctx.setStrokeStyle(gradient)
  ctx.setLineCap('round')
  ctx.beginPath()
  
  step = 0.01 * step + 0.99
  if (step === 1) {
    step = 0.99
  }
  if (step >= 2) {
    step = step % 2
  }
  if (step === 1.99) {
    step = 0.01
  }
  
  ctx.arc(centerX.value, centerY.value, radius.value, 0.99 * Math.PI, step * Math.PI, false)
  ctx.stroke()
  ctx.draw()
  
  // 绘制端点指示器
  if (props.indicator_show) {
    drawIndicator(step)
  }
  
  if (props.value > percent.value) {
    percent.value++
    setTimeout(() => {
      drawCircle(percent.value)
    }, time)
  }
}

const drawIndicator = (step) => {
  const ctx = uni.createCanvasContext('cpindicator', instance)
  ctx.clearRect(0, 0, props.progress_width, props.progress_height)
  
  // 计算指示器位置
  const angle = step * Math.PI
  const indicatorX = centerX.value + radius.value * Math.cos(angle)
  const indicatorY = centerY.value + radius.value * Math.sin(angle)
  
  // 绘制指示器外圈（白色边框）
  if (props.indicator_border_width > 0) {
    ctx.setFillStyle(props.indicator_border_color)
    ctx.beginPath()
    ctx.arc(indicatorX, indicatorY, props.indicator_size + props.indicator_border_width, 0, 2 * Math.PI)
    ctx.fill()
  }
  
  // 创建渐变效果
  const indicatorGradient = ctx.createLinearGradient(
    indicatorX, 
    indicatorY - props.indicator_size, 
    indicatorX, 
    indicatorY + props.indicator_size
  )
  indicatorGradient.addColorStop('0', props.indicator_gradient_start)
  indicatorGradient.addColorStop('1.0', props.indicator_gradient_end)
  
  // 绘制指示器内圈（渐变背景）
  ctx.setFillStyle(indicatorGradient)
  ctx.beginPath()
  ctx.arc(indicatorX, indicatorY, props.indicator_size, 0, 2 * Math.PI)
  ctx.fill()
  
  ctx.draw()
}

const initProgress = () => {
  percent.value = 0
  drawProgressbg()
  drawCircle(props.value)
}

// 生命周期
onMounted(() => {
  // 小程序环境需要延迟执行，确保canvas渲染完成
  setTimeout(() => {
    initProgress()
  }, 100)
})

// 监听value变化
watch(() => props.value, (newValue) => {
  percent.value = 0
  setTimeout(() => {
    drawCircle(newValue)
  }, 50)
})

// 暴露方法供父组件调用
defineExpose({
  initProgress,
  drawCircle
})
</script>

<style scoped>
.progress_box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.progress_bar,
.progress_bg {
  position: absolute;
}
</style>